<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<!--
  1.双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
  2. v-html="info"  vue指令  info不在表示字符串   data中声明的属性名
  3. v-text="info"  vue指令   v-text  无法识别html标签

 注意:  v-html   v-text 都可以实现标签内容的填充,但是和插值语法有区别
       1.  插值语法不会覆盖标签中的原有内容  {{}} 一般使用在标签体内容
           通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
       2.  v-html   v-text 会覆盖标签中的内容
-->
<div id="app">
  <p>{{info}}</p>
  <p v-html="info.toUpperCase()">这是一个默认值</p>
  <p v-text="info.toUpperCase()">这是一个默认值</p>
  <p v-text="age+1">这是一个默认值</p>
  <p v-text="info">这是一个默认值</p>
  <span v-once>这个将不会改变: {{ msg }}</span>
</div>
<script>
  let vm = new Vue({
      el:'#app',
      data:{
        info:"hello vue",
        age:20,
        msg: 15
      },
      methods:{}
    })
</script>
</body>
</html>